class SkyUI extends DateTimerUI{
  private stageDiv:any;
  private starlits: Array<Starlit>;
  private isStarlitOn: boolean;
  protected createView(){
    this.stageDiv = document.getElementById("canvasDiv");
    this.stageDiv.style.backgroundColor = 'HSL(200, 94%, 0%)';    

    this.createStarlits(20);
  }

  private createStarlits(count:number){
    this.starlits = [];
    var item: Starlit;

    for (var i = 0; i < count; i++){
        item = new Starlit();
        this.addChild(item);
        this.starlits.push(item);
    }

    this.isStarlitOn = false;
  }

  private drawStarlits(hour:number){
    if(hour > 18 || hour < 6){ // 夜里，点亮星星
        if (this.isStarlitOn) return;

        this.starlits.forEach((item:Starlit) => {            
            item.x = this.stage.stageWidth * Math.random();
            item.y = this.stage.stageHeight * Math.random();
            item.show();
        });

        this.isStarlitOn = true;

    }else{ // 白天，星星下班
        if (this.isStarlitOn) {
            this.starlits.forEach((item: Starlit) => {
                item.hide();
            });
            this.isStarlitOn = false;
        }
    }
  }

  protected timeUpdate(timer:DateTimer){
    var hsl = this.getHSLOfDateTimer(timer);
    this.stageDiv.style.backgroundColor = hsl;

    this.drawStarlits(timer.hour);
  }

  public getHSLOfDateTimer(dateTimer:DateTimer):string{
   //console.info("dateTimer:", dateTimer);
   var time = dateTimer.hour + (dateTimer.minute/60);
   // 天空背景色，亮度最高42%
   var lightNow = 42 * (time > 12 ? 24 - time : time) / 12;
   return 'HSL(200, 94%, '+ lightNow +'%)';
  }
}